﻿.button {
    &.is-secondary {
        background-color: #6c757d;
        border-color: transparent;
        color: #fff;

        &:hover, &.is-hovered {
            background-color: #5a6268;
            border-color: transparent;
            color: #fff;
        }

        &:focus, &.is-focused {
            border-color: transparent;
            color: #fff;
        }

        &:focus:not(:active), &.is-focused:not(:active) {
            box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
        }

        &:active, &.is-active {
            background-color: #545b62;
            border-color: transparent;
            color: #fff;
        }

        &[disabled],
        fieldset[disabled] & {
            background-color: #6c757d;
            border-color: transparent;
            box-shadow: none;
        }

        &.is-inverted {
            background-color: #fff;
            color: #6c757d;

            &:hover, &.is-hovered {
                background-color: #f2f2f2;
            }

            &[disabled],
            fieldset[disabled] & {
                background-color: #fff;
                border-color: transparent;
                box-shadow: none;
                color: #6c757d;
            }
        }


        &.is-loading {
            &::after {
                border-color: transparent transparent #fff #fff !important;
            }
        }

        &.is-outlined {
            background-color: transparent;
            border-color: #6c757d;
            color: #6c757d;

            &:hover, &.is-hovered, &:focus, &.is-focused {
                background-color: #6c757d;
                border-color: #6c757d;
                color: #fff;
            }

            &.is-loading::after {
                border-color: transparent transparent #6c757d #6c757d !important;
            }

            &.is-loading:hover::after, &.is-loading.is-hovered::after, &.is-loading:focus::after, &.is-loading.is-focused::after {
                border-color: transparent transparent #fff #fff !important;
            }

            &[disabled],
            fieldset[disabled] & {
                background-color: transparent;
                border-color: #6c757d;
                box-shadow: none;
                color: #6c757d;
            }
        }

        &.is-inverted.is-outlined {
            background-color: transparent;
            border-color: #fff;
            color: #fff;

            &:hover, &.is-hovered, &:focus, &.is-focused {
                background-color: #fff;
                color: #6c757d;
            }

            &.is-loading {
                &:hover::after, &.is-hovered::after, &:focus::after, &.is-focused::after {
                    border-color: transparent transparent #6c757d #6c757d !important;
                }
            }

            &[disabled],
            fieldset[disabled] & {
                background-color: transparent;
                border-color: #fff;
                box-shadow: none;
                color: #fff;
            }
        }
    }
}

.button {
    &.is-extra-small {
        font-size: $size-extra-small;
    }

    &.is-small {
        font-size: $size-small;
    }

    &.is-medium {
        font-size: $size-medium;
    }

    &.is-large {
        font-size: $size-large;
    }

    &.is-extra-large {
        font-size: $size-extra-large;
    }
}

.field.has-addons {
    &.are-extra-small {
        > .control {
            > .button {
                @extend .is-extra-small;
            }
        }
    }

    &.are-small {
        > .control {
            > .button {
                @extend .is-small;
            }
        }
    }

    &.are-medium {
        > .control {
            > .button {
                @extend .is-medium;
            }
        }
    }

    &.are-large {
        > .control {
            > .button {
                @extend .is-large;
            }
        }
    }

    &.are-extra-large {
        > .control {
            > .button {
                @extend .is-extra-large;
            }
        }
    }
}
